<template>
    <el-dialog
        title="查看流程数据"
        v-model="dialogVisible"
        width="60%"
        @opened="handleOpened"
        @close="handleClose"
        custom-class="m-dialog-data-detail"
        :append-to-body="true">
        <div style="height: 50vh;overflow-y:scroll;">
            <vue-json-pretty :data="graphData"></vue-json-pretty>
        </div>
        <template #footer>
            <el-button type="primary" class="m-flow-btn-copy" :data-clipboard-text="copyJsonContent">复制JSON</el-button>
        </template>
    </el-dialog>
</template> 

<script lang="ts">
import {ref, defineExpose, computed, unref, onBeforeUnmount} from 'vue'
//@ts-ignore
import {ElMessage} from 'element-plus'
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'
import Clipboard from 'clipboard'
</script>

<script setup lang="ts">
const dialogVisible = ref(false)
const graphData = ref({} as any)
const clipboard = ref(null as any)
// const copyJsonContent= ref('')


const copyJsonContent = computed(() => {
    return JSON.stringify(unref(graphData), null, 2)
})


const show = (data: any) => {
    dialogVisible.value = true
    graphData.value = data
    // copyJsonContent.value= JSON.stringify(unref(graphData), null, 2)
}

const handleOpened = () => {
    // 这里使用选择器，因为直接使用.m-flow-btn-copy复制会失效(原因示明)
    const copyEl = document.querySelectorAll('.m-flow-btn-copy')
    clipboard.value = new Clipboard(copyEl, {
        // 复制需要临时创建一个textarea文件，可以放在自定义的.m-dialog-data-detail内
        container: document.querySelector('.m-dialog-data-detail') as Element
    })
    clipboard.value.on('success', function (e: any) {
        ElMessage.success('复制成功')
        e.clearSelection()
    })
    clipboard.value.on('error', function () {
        ElMessage.error('复制失败')
    })
}

const handleClose = () => {
    if (clipboard.value) {
        clipboard.value.destroy()
    }
}


defineExpose({
    show,
    handleClose
})
</script>